<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--文件数据-->
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
<!--                    <el-col :span="1.5">-->
<!--                        <el-button-->
<!--                            type="danger"-->
<!--                            plain-->
<!--                            icon="el-icon-delete"-->
<!--                            size="mini"-->
<!--                            :disabled="multiple"-->
<!--                            @click="handleDelete"-->
<!--                        >删除</el-button>-->
<!--                    </el-col>-->
                    <el-col :span="1.5">
                        <el-button
                            type="info"
                            plain
                            icon="el-icon-upload2"
                            size="mini"
                            @click="handleImport"
                        >文件上传</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-checkbox v-model="showImages">展示图片</el-checkbox>
                    </el-col>
<!--                    <el-col :span="1.5">-->
<!--                        <el-button-->
<!--                            type="warning"-->
<!--                            plain-->
<!--                            icon="el-icon-download"-->
<!--                            size="mini"-->
<!--                            @click="handleExport"-->
<!--                            v-hasPermi="['system:user:export']"-->
<!--                        >导出</el-button>-->
<!--                    </el-col>-->
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>

                <el-table v-loading="loading" :data="fileList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column prop="originalFilename" align="center" label="文件名称"/>
                    <el-table-column label="url" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <image-preview
                                v-if="showImages && isImageFile(scope.row.ext)"
                                :key="scope.row.id"
                                :src="scope.row.url"
                                :width="50"
                                :height="50"
                            />
                            <span v-else>{{ scope.row.url }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ext" align="center" label="文件格式"/>
                    <el-table-column label="创建时间" align="center" prop="createTime">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
<!--                    <el-table-column-->
<!--                        label="操作"-->
<!--                        align="center"-->
<!--                        width="160"-->
<!--                        class-name="small-padding fixed-width"-->
<!--                    >-->
<!--                        <template slot-scope="scope">-->
<!--                            <el-button-->
<!--                                size="mini"-->
<!--                                type="text"-->
<!--                                icon="el-icon-delete"-->
<!--                                @click="handleDelete(scope.row)"-->
<!--                            >删除</el-button>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                </el-table>

                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
            </el-col>
        </el-row>


        <!-- 文件上传对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload
                ref="upload"
                :limit="1"
                :headers="upload.headers"
                :action="upload.url"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listFile } from "@/api/system/file"
import { getToken } from '@/utils/auth'
import ImagePreview from "@/components/ImagePreview"

export default {
    name: "File",
    components: {
        ImagePreview
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 显示图片
            showImages: false,
            // 总条数
            total: 0,
            // 文件表格数据
            fileList: null,
            // 弹出层标题
            title: "",
            // 部门树选项
            deptOptions: undefined,
            // 经销商树
            companyOptions: undefined,
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {},
            // 文件上传参数
            upload: {
                // 是否显示弹出层（文件上传）
                open: false,
                // 弹出层标题（文件上传）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的文件数据
                // updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/manage-api/common/upload-v2"
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // parentId: undefined
            }
        };
    },
    created() {
        this.getList()
    },
    methods: {
        /** 判断是否为图片文件 */
        isImageFile(ext) {
            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            return imageExtensions.includes(ext ? ext.toLowerCase() : '');
        },
        /** 查询文件列表 */
        getList() {
            this.loading = true
            listFile(this.queryParams).then(response => {
                    this.fileList = response.rows
                    this.total = response.total
                    this.loading = false
                }
            )
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.userId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const userIds = row.userId || this.ids;
            this.$modal.confirm('是否确认删除文件编号为"' + userIds + '"的数据项？').then(function() {
                return delUser(userIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/user/export', {
                ...this.queryParams
            }, `user_${new Date().getTime()}.xlsx`)
        },
        /** 文件上传按钮操作 */
        handleImport() {
            this.upload.title = "文件上传"
            this.upload.open = true
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "文件上传结果", { dangerouslyUseHTMLString: true });
            this.getList();
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        }
    }
};
</script>
